const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
const UglifyPlugin = require('uglifyjs-webpack-plugin')
let { version, openGzip } = require('./package.json')
version = version.replace(/\./g, '_')

let publicPath = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PUBLICPATH : './'
module.exports = {
    publicPath: publicPath,
    productionSourceMap: false,
    outputDir: 'dist',
    assetsDir: 'static',
    lintOnSave: false,
    devServer: {
        disableHostCheck: true,
        // port: 8083,
        proxy: {
            '/basic-api': {
                target: process.env.VUE_APP_API_URL,
                changeOrigin: true,
                pathRewrite:{
                    '^/basic-api':'',
                }
            }
        }
    },
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            }
        }
    },
    chainWebpack: config => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => {
            addStyleResource(config.module.rule('less').oneOf(type))
        })
        config.plugins.delete('preload')
        config.plugins.delete('prefetch')
        config.resolve.alias
            .set('@$', path.join(__dirname, 'src'))
            .set('$common', path.join(__dirname, 'src/$common'))
            .set('components', path.join(__dirname, 'src/components'))
            .set('mixins', path.join(__dirname, 'src/mixins'))
            .set('store', path.join(__dirname, 'src/store'))
            .set('pages', path.join(__dirname, 'src/pages'))
            .set('assets', path.join(__dirname, 'src/assets'))
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            //为生产环境修改配置
            config.mode = 'production'
            let optimization = {
                    minimizer: [
                        new UglifyPlugin({
                            uglifyOptions: {
                                warnings: false,
                                compress: {
                                    drop_console: true,
                                }
                            }
                        })
                    ]
                }
                //将每个依赖包打包成单独的JS文件
            Object.assign(config, {
                output: {
                    ...config.output,
                    filename: `static/js/[name].[chunkhash].${version}.js`,
                    chunkFilename: `static/js/[name].[chunkhash].${version}.js`
                },
                optimization,
                plugins: [
                    ...config.plugins
                ]

            })
            if (openGzip) {
                config.plugins = [
                    ...config.plugins,
                    new CompressionPlugin({
                        test: /\.js$|\.html$|.\css/, //匹配文件名
                        threshold: 10240, //对超过10K的数据压缩
                        deleteOriginalAssets: false //不删除源文件
                    })
                ]
            }
        } else {
            //为开发环境修改配置
            config.mode = 'development'
        }
        Object.assign(config, {
            plugins: [...config.plugins]
        })
    }
}

function addStyleResource(rule) {
    rule.use('style-resource-loader').loader('style-resources-loader').options({
        patterns: [
            path.resolve(__dirname, './src/style/variable.less') //需要全局导入的less
        ]
    })
}